<template>
  <div class="help">
    <!-- 使用帮助 -->
    <div class="header">
      <van-nav-bar style="
          background-image: linear-gradient(-20deg,#ddd6f3 0%,#faaca8 100%,#faaca8 100%);" title="使用帮助" fixed />
    </div>
    <div style="height: 40px"></div>
    <div class="two">
      <div class="title">
        <van-cell title="常见问题" icon="question" />
      </div>
      <van-cell-group>
        <van-cell title="1.优惠卷如何使用" @click="answer1=true" />
        <van-cell title="2.取消订单后钱什么时候到账？" @click="answer2=true" />
        <van-cell title="3.可以固定同一个阿姨服务吗？" @click="answer3=true" />
        <van-cell title="4.如何选择上一次服务的阿姨？" @click="answer4=true" />
        <van-cell title="5.预约成功后在哪查看？" @click="answer5=true" />
      </van-cell-group>
    </div>

    <div class="fist">
      <div class="title">
        <van-cell title="咨讯信息" icon="question" />
      </div>

      <van-search v-model="value" show-action label="主题" placeholder="请输入咨讯标题" @search="onSearch">
        <template #action>
          <van-button @click="onSearch" size='small' style="background-color:#F4B4B6;color:#fff;">搜索</van-button>
        </template>
      </van-search>

      <div class="news_list">
        <van-card v-for="article in articleData" :key="article.id" :thumb="article.cover"
          @click="toArticleDetail(article.id)">
          <template #tags>
            <strong>{{ article.title }}</strong>
            <p>{{ article.category.name }}</p>
            <p>{{ article.publishTime | fmtDate_global }}</p>
          </template>
        </van-card>
      </div>
    </div>
    <!-- 占位 -->
    <div style="height: 50px"></div>

    <van-popup v-model="answer1" round style="width:350px;height:160px">
      <div style="margin:20px;">
        <p>(1)确认订单时直接激活使用</p>
        <p>(2)进入购物车后点击“立即结算”</p>
        <p>(3)符合使用条件的优惠券会在订单确认页面显示出来</p>
      </div>
    </van-popup>
    <van-popup v-model="answer2" round style="width:350px;height:240px">
      <div style="margin:20px;">
        <p>(1)商户发起退款操作后，资金会原路退回到支付时使用的账户</p>
        <p>(2)零钱支付实时到账，储蓄卡支付1-3个工作日到账，信用卡支付2-5个工作日到账</p>
        <p>(3)零钱是是否到账可以在下面的界面查询，银行卡是否到账可以去银行柜台,ATM机，网银等渠道查询</p>
      </div>
    </van-popup>
    <van-popup v-model="answer3" round style="width:350px;height:120px">
      <div style="margin:20px;">
        <p>可以选择同一个阿姨服务，在下单时可预约阿姨</p>
      </div>
    </van-popup>
    <van-popup v-model="answer4" round style="width:350px;height:120px">
      <div style="margin:20px;">
        <p>可以在已完成订单里选择再来一单，即可再选择相同的阿姨</p>
      </div>
    </van-popup>
    <van-popup v-model="answer5" round style="width:350px;height:100px">
      <div style="margin:20px;">
        <p>预约成功的订单可以在待服务的订单里查看</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    get
  } from "@/http/axios";
  export default {
    data() {
      return {
        // 文章数组表格的数据源
        articleData: [],
        // 是否显示弹出框
        show: false,
        value: '',
        answer1: false,
        answer2: false,
        answer3: false,
        answer4: false,
        answer5: false,
      };
    },
    methods: {
      //分页多条件获取所有文章的数据
      async getAllArticleData() {
        // 获取参数
        let data = {
          page: 1,
          pageSize: 100,
          title: this.value
          // status:'审核通过',
        };
        // 通过对应的参数发送网络请求 获取产品数组数据
        let res = await get("/article/pageQuery", data);
        // console.log(res.data.data.list);
        // 当状态为审核通过或推荐时显示列表
        for (var i = 0; i < res.data.data.list.length; i++) {
          if (
            res.data.data.list[i].status == "审核通过" ||
            res.data.data.list[i].status == "推荐"
          ) {
            this.articleData.push(res.data.data.list[i]);
          }
        }
        if (this.articleData.length == 0) {
          this.$toast.fail('暂无相关数据');
        }
      },
      // 
      onSearch() {
        this.articleData = []
        this.getAllArticleData()
      },
      // 点击图片，跳转到文章页面
      toArticleDetail(id) {
        this.$router.push({
          path: "news",
          query: {
            id: id,
          },
        });
      },
    },
    created() {
      this.getAllArticleData();
    },
  };
</script>

<style scoped>
  .title .van-icon {
    font-size: 22px;
    color: #f9db91;
  }

  .title .van-cell__title span {
    font-size: 20px;
  }

  /deep/ .van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-nav-bar__text {
    color: #fff;
  }
</style>